<template>
  <section>
    <el-tabs  v-model="selPage">
      <el-tab-pane label="食物" name="food">
        <el-checkbox-group v-model="selFood">
          <el-checkbox style="width: 25%;margin: 5px 0;" v-for="food in foodList" :label="food.id" :key="food.id" @change="setFoodWithDisease($event,food)">{{food.name}}</el-checkbox>
        </el-checkbox-group>
      </el-tab-pane>
      <el-tab-pane label="药品" name="medicine">
        <el-checkbox-group v-model="selMedicine">
          <el-checkbox style="width: 25%;margin: 5px 0;" v-for="medicine in medicineList" :label="medicine.id" :key="medicine.id" @change="setMedicineWithDisease($event,medicine)">{{medicine.name}}</el-checkbox>
        </el-checkbox-group>
      </el-tab-pane>
    </el-tabs>
    <el-pagination v-if="selPage === 'food'" v-show="foodPage>0" style="margin-top:20px;"
                   background
                   layout="prev, pager, next"
                   :page-count="foodPage"
                   @current-change="goFoodPage">
    </el-pagination>
    <el-pagination v-if="selPage === 'medicine'" v-show="medicinePage>0" style="margin-top:20px;"
                   background
                   layout="prev, pager, next"
                   :page-count="medicinePage"
                   @current-change="goMedicinePage">
    </el-pagination>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  export default {
    name: "setFoodMedicine",
    props: ['currDisease'],
    data() {
      return {
        selPage:'food',
        showSet:false,
        foodList:null,
        medicineList:null,
        selFood:[],
        selMedicine:[],
        foodPage:0,
        medicinePage:0
      }
    },
    created(){
      //加载食品库列表
      this.getFoodList()
      this.getMedicineList()
      this.init()
    },
    computed:{
    },
    watch: {
      currDisease(nv,ov){
        if(nv){
          console.log(nv)
          this.selFood=[]
          this.selMedicine=[]
          this.init()
        }
      }
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      init(){
        if(this.currDisease.metadata){
          let tmpFood = this.currDisease.metadata.select.filter(m=>m.type === 1)
          tmpFood.forEach(t=>{
            this.selFood.push(t.id)
          })
        }
        if(this.currDisease.metadata){
          let tmpMedicine = this.currDisease.metadata.select.filter(m=>m.type == 2)
          tmpMedicine.forEach(t=>{
            this.selMedicine.push(t.id)
          })
        }
      },
      goFoodPage(val){
        this.getFoodList(val-1)
      },
      goMedicinePage(val){
        this.getMedicineList(val-1)
      },
      getFoodList(pageNo, key) {
        this.fetch({name: "getFoodList", data: {page: pageNo ? pageNo : 0, key: key ? key : ''}})
          .then(res => {
            console.log(res)
            this.foodList = res.content
            this.foodPage = res.totalPages
          })
          .catch(err => {
            console.log(err)
            errHandler.handle(this, err)
          })
      },
      getMedicineList(pageNo, key) {
        this.fetch({name: "getMedicineList", data: {page: pageNo ? pageNo : 0, key: key ? key : ''}})
          .then(res => {
            console.log(res)
            this.medicineList = res.content
            this.medicinePage = res.totalPages
          })
          .catch(err => {
            console.log(err)
            errHandler.handle(this, err)
          })
      },
      setFoodWithDisease(e,c){
        let value;
        if(e) value = 1
        else value = 0
        this.fetch({name:"setFoodWithDisease",data:{
            diseaseId:this.currDisease.id,
            type:value,
            foodId:c.id
          }})
          .then(res=>{
            console.log(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      setMedicineWithDisease(e,c){
        let value;
        if(e) value = 1
        else value = 0
        this.fetch({name:"setMedicineWithDisease",data:{
            diseaseId:this.currDisease.id,
            type:value,
            medicineId:c.id
          }})
          .then(res=>{
            console.log(res)
            this.$message({type:'success',message:'设置成功！'})
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
